import React, { useEffect, useState } from "react";
import axios from "axios";
import { ProductCard, List } from "react-vant";
import { NavLink } from 'react-router-dom'
interface ListType {
  id: number;
  image: string;
  title: string;
  desc: string;
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListType[]>([]);
  const [finished, setFinished] = useState(false);
  const [pageCode, setPageCode] = useState(1);

  const fetchList = async () => {
    const resp = await axios.get("/api/list", {
      params: { pageCode },
    });
    const { code, message, data } = resp.data;
    if (code === 200) {
      setList([...list, ...data]);
      setPageCode(pageCode + 1);
    } else {
      setFinished(true);
    }
  };

  return (
    <div>
      <div className="header">
        <NavLink to="/tag">标签</NavLink>
        <NavLink to="/sign">签到</NavLink>
      </div>
      <List
        onLoad={fetchList}
        finished={finished}
        finishedText={"没有更多数据了"}
        loadingText={"数据拼命加载中..."}
      >
        {list.map((v) => {
          return (
            <ProductCard
              key={v.id}
              desc={v.desc}
              title={v.title + "-----" + v.id}
              thumb={v.image}
            ></ProductCard>
          );
        })}
      </List>
    </div>
  );
};
export default Index;
